<!DOCTYPE>
<html>
<head>
	<meta charset="utf-8" />
	<title>筛选页---电商网站</title>	
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<script type="text/javascript" src="js/myfocus-2.0.1.min.js"></script><!--引入myFocus库-->
	<script type="text/javascript" src="js/myfocus_zdy.js"></script><!--自定义myfocus-->
</head>
<body>
<div class="headerBar">
	<div class="topBar">
		<div class="comWidth">
			<div class="leftArea">
				<a href="#" class="collection">收藏慕课</a>
			</div>
			<div class="rightArea">
				欢迎来到慕课网！<a href="">[登录]</a><a href="">[免费注册]</a>
			</div>
		</div>
	</div><!-- topBar结束 -->
	<div class="logoBar ">
		<div class="comWidth">	
			<div class="logo fl">
				<a href="#"><img src="images/logo.png" alt="慕课网"></a>
			</div>
			<div class="search_box fl">
				<input type="text" class="search_text fl" />
				<input type="button" value="搜 索" class="search_btn fr">
			</div>
			<div class="shopCar fr">
				<span class="shopText fl">购物车</span>
				<span class="shopNum fl">25</span>
			</div>
		</div>
	</div><!--  logoBar结束  -->
	<div class="navbox">
		<div class="comWidth">
			<div class="shopClass fl">
				<h3  class="active">全部商品分类<i></i></h3>
				
			</div>
			<ul class="nav fl">
				<li><a href="#">数码城</a></li>
				<li><a href="#">天黑黑</a></li>
				<li><a href="#">团购</a></li>
				<li><a href="#">二手特卖</a></li>
				<li><a href="#">名品会</a></li>
			</ul>
		</div>
	</div><!-- navBar结束 -->
</div><!-- headerBar结束 -->
<div class="hr_15"></div>
<div class="comWidth clearfix products">
	<div class="leftArea">
		<div class="leftNav vertical">
			<h3 class="nav_title ">手机、数码</h3>
			<div class="nav_cont clearfix">
				<h3>手机通讯</h3>
				<ul class="navCont_list">
					<li><a href="#">全部手机</a></li>
					<li><a href="#">全部手机</a></li>
					<li><a href="#">双卡手机</a></li>					
				</ul>
			</div>
			<div class="nav_cont clearfix">
				<h3>手机通讯</h3>
				<ul class="navCont_list">
					<li><a href="#">全部手机</a></li>
					<li><a href="#">全部手机</a></li>
					<li><a href="#">双卡手机</a></li>
					<li><a href="#">全部手机</a></li>					
				</ul>
			</div>
			<div class="nav_cont clearfix">
				<h3>手机通讯</h3>
				<ul class="navCont_list">
					<li><a href="#">全部手机</a></li>
					<li><a href="#">全部手机</a></li>
					<li><a href="#">双卡手机</a></li>					
				</ul>
			</div>
			<div class="nav_cont clearfix">
				<h3>手机通讯</h3>
				<ul class="navCont_list">
					<li><a href="#">全部手机</a></li>
					<li><a href="#">全部手机</a></li>
					<li><a href="#">双卡手机</a></li>					
				</ul>
			</div>
			<div class="nav_cont clearfix">
				<h3>手机通讯</h3>
				<ul class="navCont_list">
					<li><a href="#">全部手机</a></li>
					<li><a href="#">全部手机</a></li>
					<li><a href="#">双卡手机</a></li>
					<li><a href="#">全部手机</a></li>
					<li><a href="#">自拍神器</a></li>				
				</ul>
			</div>
		</div>
	</div><!-- leftArea结束 -->
	<div class="rightArea">
		<div class="screening_box">
			<dl class="screening clearfix">
				<dt>手机</dt>
				<dd class="limit"><a href="#" class="active">不限</a></dd>
				<dd class="screning_list">
					<ul class="clearfix">
						<li><a href="#">Apple/苹果</a></li>
						<li><a href="#">Huawei/华为</a></li>
						<li><a href="#">Samsung/三星</a></li>
						<li><a href="#">Huawei/华为</a></li>
						<li><a href="#">Samsung/三星</a></li>
						<li><a href="#">Huawei/华为</a></li>
						<li><a href="#">Samsung/三星</a></li>
					</ul>					
				</dd>
			</dl>
			<dl class="screening clearfix">
				<dt>手机</dt>
				<dd class="limit"><a href="#" class="active">不限</a></dd>
				<dd class="screning_list">
					<ul class="clearfix">
						<li><a href="#">Apple/苹果</a></li>
						<li><a href="#">Huawei/华为</a></li>
						<li><a href="#">Samsung/三星</a></li>				
					</ul>					
				</dd>
			</dl>
			<dl class="screening clearfix">
				<dt>手机</dt>
				<dd class="limit"><a href="#" class="active">不限</a></dd>
				<dd class="screning_list">
					<ul class="clearfix">
						<li><a href="#">Apple/苹果</a></li>
						<li><a href="#">Huawei/华为</a></li>
						<li><a href="#">Samsung/三星</a></li>
						<li><a href="#">Huawei/华为</a></li>
						<li><a href="#">Samsung/三星</a></li>
						<li><a href="#">Huawei/华为</a></li>
						<li><a href="#">Samsung/三星</a></li>
						<li><a href="#">Huawei/华为</a></li>
						<li><a href="#">Samsung/三星</a></li>
						<li><a href="#">Huawei/华为</a></li>
						<li><a href="#">Samsung/三星</a></li>
					</ul>					
				</dd>
			</dl>
			<dl class="screening clearfix">
				<dt>手机</dt>
				<dd class="limit"><a href="#" class="active">不限</a></dd>
				<dd class="screning_list">
					<ul class="clearfix">
						<li><a href="#">Apple/苹果</a></li>
						<li><a href="#">Huawei/华为</a></li>
						<li><a href="#">Samsung/三星</a></li>
						<li><a href="#">Huawei/华为</a></li>
						<li><a href="#">Samsung/三星</a></li>
						<li><a href="#">Huawei/华为</a></li>
						<li><a href="#">Samsung/三星</a></li>
					</ul>					
				</dd>
			</dl>
			<dl class="screening clearfix">
				<dt>手机</dt>
				<dd class="limit"><a href="#" class="active">不限</a></dd>
				<dd class="screning_list">
					<ul class="clearfix">
						<li><a href="#">Apple/苹果</a></li>
						<li><a href="#">Huawei/华为</a></li>
						<li><a href="#">Samsung/三星</a></li>
						<li><a href="#">Huawei/华为</a></li>
						<li><a href="#">Samsung/三星</a></li>
						<li><a href="#">Huawei/华为</a></li>
						<li><a href="#">Samsung/三星</a></li>
						<li><a href="#">Huawei/华为</a></li>
						<li><a href="#">Samsung/三星</a></li>
						<li><a href="#">Huawei/华为</a></li>
						<li><a href="#">Samsung/三星</a></li>
					</ul>					
				</dd>
			</dl>
			<dl class="screening clearfix">
				<dt>更多选项</dt>
				<dd class="screning_list">
						<div class="screen_more">
							<a href="#">CPU核心数</a>
						</div>
						<div class="screen_more">
							<a href="#">主摄像头像素</a>
						</div>				
					</ul>					
				</dd>
			</dl>
		</div>
		<!-- 地址 -->
		<div class="hr_15"></div>
		<div class="addInfo">
			<div class="address">
				<span class="add_text">送至</span>
				<div class="select filt_select">
					<h3>海淀区五环内</h3><span></span>
					<ul class="show_select">
						<li>通州</li>
						<li>海淀</li>
						<li>通州</li>
					</ul>
				</div>
			</div>
			<div class="fr screen_text">
				<span class="check">
					<input type="checkbox" id="check"/><label for="check">仅显示有货</label>
				</span>
				<span class="shop_number">
					共<em>1234</em>件
				</span>
			</div>
		</div>
		<div class="hr_7"></div>
		<div class="products_list cereening_list_more clearfix">
			<div class="item_cont">
				<div class="item">
					<div class="img_item">
						<a href="#"><img src="images/lb01.gif" alt=""></a>
					</div>
					<p><a href="#">文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍1</a></p>
					<p class="money">￥888</p>
					<p><a href="#" class="addCar">加入购物车</a></p>
					<div class="hot"></div>					
				</div>
				
			</div><!-- item_contEnd -->
			<div class="item_cont">
				<div class="item">
					<div class="img_item">
						<a href="#"><img src="images/lb02.gif" alt=""></a>
					</div>
					<p><a href="#">文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍</a></p>
					<p class="money">￥888</p>
					<p><a href="#" class="addCar">加入购物车</a></p>
				</div>
			</div><!-- item_contEnd -->
			<div class="item_cont">
				<div class="item">
					<div class="img_item">
						<a href="#"><img src="images/lb03.gif" alt=""></a>
					</div>
					<p><a href="#">文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍</a></p>
					<p class="money">￥888</p>
					<p><a href="#" class="addCar">加入购物车</a></p>
					<div class="hot"></div>	
				</div>
			</div><!-- item_contEnd -->
			<div class="item_cont">
				<div class="item">
					<div class="img_item">
						<a href="#"><img src="images/lb04.gif" alt=""></a>
					</div>
					<p><a href="#">文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍</a></p>
					<p class="money">￥888</p>
					<p><a href="#" class="addCar">加入购物车</a></p>
				</div>
			</div><!-- item_contEnd -->
			<div class="item_cont">
				<div class="item">
					<div class="img_item">
						<a href="#"><img src="images/lb05.gif" alt=""></a>
					</div>
					<p><a href="#">文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍</a></p>
					<p class="money">￥888</p>
					<p><a href="#" class="addCar">加入购物车</a></p>
					<div class="hot"></div>	
				</div>
			</div><!-- item_contEnd -->
			<div class="item_cont">
				<div class="item">
					<div class="img_item">
						<a href="#"><img src="images/lb03.gif" alt=""></a>
					</div>
					<p><a href="#">文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍</a></p>
					<p class="money">￥888</p>
					<p><a href="#" class="addCar">加入购物车</a></p>
				</div>
			</div><!-- item_contEnd -->
			<div class="item_cont">
				<div class="item">
					<div class="img_item">
						<a href="#"><img src="images/lb02.gif" alt=""></a>
					</div>
					<p><a href="#">文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍</a></p>
					<p class="money">￥888</p>
					<p><a href="#" class="addCar">加入购物车</a></p>
					<div class="hot"></div>	
				</div>
			</div><!-- item_contEnd -->
			<div class="item_cont">
				<div class="item">
					<div class="img_item">
						<a href="#"><img src="images/lb04.gif" alt=""></a>
					</div>
					<p><a href="#">文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍</a></p>
					<p class="money">￥888</p>
					<p><a href="#" class="addCar">加入购物车</a></p>
				</div>
			</div><!-- item_contEnd -->
		</div>
		<div class="hr_15"></div>
		<div class="page">
			<a href="#">上一页</a><a href="#">1</a><a href="#">2</a><a href="#">3</a>
			<a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#">7</a>
			<a href="#">8</a><span class="hl">...</span><a href="#">200</a>
			<a href="#">下一页</a><span class="morePage">共200页，到第</span>
			<input type="text" class="pageNum"> 页
			<input type="button" class="page_btn" value="确定">
		</div>
	</div><!-- rightArea结束 -->
</div><!-- products -->
<div class="hr_15"></div>
<div class="footer"><!-- -->
	<p>
		<a href="#">网站首页</a><i>|</i>
		<a href="#">人才招聘</a><i>|</i>
		<a href="#">联系我们</a><i>|</i>
		<a href="#">慕课云</a><i>|</i>
		<a href="#">关于我们</a><i>|</i>
		<a href="#">讲师招募</a><i>|</i>
		<a href="#">意见反馈</a><i>|</i>
		<a href="#">友情链接</a>
	</p>
	<p>Copyright &copy; 2015 imooc.com All Rights Reserved | 京ICP备 13046642号-2</p>
	<p class="web">
		<a herf="#"><img src="images/weblogo.gif" alt=""></a>
		<a herf="#"><img src="images/weblogo.gif" alt=""></a>
		<a herf="#"><img src="images/weblogo.gif" alt=""></a>
		<a herf="#"><img src="images/weblogo.gif" alt=""></a>
	</p>
</div>
</body>
</html>
